import React, { FC } from 'react'
import Modal, { ModalProps } from 'antd/lib/modal/Modal'
import "./index.scss"
import Spec from './Spec'
import { Button } from 'antd'
import { DownloadOutlined, HeartOutlined } from '@ant-design/icons';
import Zoom from './Zoom'

interface IProps extends ModalProps {
    handleCancel: () => void
    data?: any
}
const IMShowPic: FC<IProps> = ({ handleCancel, visible, data }) => {
    return <Modal footer={null} onCancel={handleCancel} visible={visible} className="im_show_pic_modal">
        {/* 缩放图片 左 */}
        <Zoom data={{ src: data.imgSrc }}></Zoom>
        {/* 图片信息 右 */}
        <div className="im_show_pic_modal_right">
            <p>年轻微笑的女人带着手提箱坐在车上Young smiling woman with a suitcas…
                年轻微笑的女人带着手提箱坐在车上Young smiling woman with a suitcas…</p>
            <div className="im_show_pic_modal_right_info">
                <div className="im_show_pic_modal_right_info_item">
                    <span>编号</span>
                    <span>wadwawawafefefeaf</span>
                </div>
                <div className="im_show_pic_modal_right_info_item">
                    <span>文件大小</span>
                    <span>wadwawawafefefeaf</span>
                </div>
                <div className="im_show_pic_modal_right_info_item">
                    <span>用途</span>
                    <span>wadwawawafefefeaf</span>
                </div>
                <div className="im_show_pic_modal_right_info_item">
                    <span>作者</span>
                    <span>wadwawawafefefeaf</span>
                </div>
            </div>
            {/* 图片规格选择 */}
            <Spec></Spec>
            {/* 下载 收藏 */}
            <div className="im_show_pic_modal_right_btn">
                <Button type="ghost" shape="circle" icon={<DownloadOutlined twoToneColor="#222" />} size="large" />
                <Button type="ghost" shape="circle" icon={<HeartOutlined />} size="large"></Button>
            </div>
        </div>
    </Modal>
}

export default IMShowPic